<template>
  <div class="app-container">
    <el-card>
      <!-- 增加按钮 -->
      <div class="addTest">
        <el-button type="success"
                   @click="$router.push('/questions/new')">新增试题</el-button>
      </div>
      <br><br><br>

      <!-- 筛选表单 -->
      <el-form ref="testForm"
               :model="params"
               inline
               label-width="70px"
               class="filter"
               size="small">
        <el-row :gutter="5">
          <el-col :span="6">
            <!-- 1 -->
            <el-form-item label="学科"
                          prop="subjectID"
                          size='small'>
              <el-select v-model="params.subjectID"
                         placeholder="请选择"
                         @change="changeSub"
                         size='small'>
                <el-option v-for="(item,index) in $store.state.user.subList"
                           :key="index"
                           :label="item.subjectName"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="6">
            <!-- 2 -->
            <el-form-item label="二级目录"
                          prop="catalogID"
                          size='small'>
              <el-select v-model="params.catalogID"
                         placeholder="请选择"
                         size='small'>
                <el-option v-for="(item,index) in cataList"
                           :key="index"
                           :label="item.directoryName"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 3 -->
            <el-form-item label="标签"
                          prop="tags">
              <el-select v-model="params.tags"
                         placeholder="请选择"
                         size='small'>
                <el-option v-for="(item,index) in tagsList"
                           :key="index"
                           :label="item.tagName"
                           :value="item.tagName">
                </el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="6">
            <!-- 4 -->
            <el-form-item label="关键字"
                          prop="keyword">
              <el-input clearable
                        v-model="params.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="6">
            <!-- 5 -->
            <el-form-item label="试题类型"
                          prop="questionType">
              <el-select v-model="params.questionType"
                         placeholder="请选择"
                         size='small'>
                <el-option label="单选"
                           value="1">
                </el-option>
                <el-option label="多选"
                           value="2">
                </el-option>
                <el-option label="简单"
                           value="3">
                </el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="6">
            <!-- 6 -->
            <el-form-item label="难度"
                          prop="difficulty">
              <el-select v-model="params.difficulty"
                         placeholder="请选择"
                         size='small'>
                <el-option label="简单"
                           value="1">
                </el-option>
                <el-option label="一般"
                           value="2">
                </el-option>
                <el-option label="困难"
                           value="3">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 7 -->
            <el-form-item label="方向"
                          prop="direction">
              <el-select v-model="params.direction"
                         placeholder="请选择"
                         size='small'>
                <el-option label="o2o"
                           value="o2o">
                </el-option>
                <el-option label="外包服务"
                           value="外包服务">
                </el-option>
                <el-option label="企业服务"
                           value="企业服务">
                </el-option>
                <el-option label="互联网金融"
                           value="互联网金融">
                </el-option>
                <el-option label="企业咨询"
                           value="企业咨询">
                </el-option>
                <el-option label="互联网"
                           value="互联网">
                </el-option>
                <el-option label="电子商务"
                           value="电子商务">
                </el-option>
                <el-option label="其他"
                           value="其他">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 8 -->
            <el-form-item label="录入人"
                          prop="creatorID">
              <el-select v-model="params.creatorID"
                         placeholder="请选择"
                         size='small'>
                <el-option v-for="(item,index) in userList"
                           :key="index"
                           :label="item.username"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="6">
            <!-- 9 -->
            <el-form-item label="题目备注"
                          prop="remarks">
              <el-input clearable
                        v-model="params.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 10 -->
            <el-form-item label="企业简称"
                          prop="shortName">
              <el-input clearable
                        v-model="params.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 11 -->
            <el-form-item label="城市"
                          prop="province">
              <div style="width:205px">
                <el-row :gutter="10">
                  <el-col :span="12"
                          :offset="0">
                    <el-select v-model="params.province"
                               placeholder="请选择"
                               @change="getCitys"
                               size='small'>
                      <el-option v-for="(item,index) in provincesList"
                                 :key="index"
                                 :label="item"
                                 :value="item">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12"
                          :offset="0">
                    <el-form-item label=""
                                  prop="city">
                      <el-select v-model="params.city"
                                 placeholder="请选择"
                                 size='small'>
                        <el-option v-for="(item,index) in citysList"
                                   :key="index"
                                   :label="item"
                                   :value="item">
                        </el-option>
                      </el-select>
                    </el-form-item>

                  </el-col>
                </el-row>
              </div>

            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button @click="resetForm">清除</el-button>
              <el-button type="primary"
                         @click="loadChioceList">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <!-- 警告提示 -->
      <el-alert :title="`数据一共${count}条`"
                show-icon
                center
                :closable="false"
                type="info">
      </el-alert>
      <br>

      <!-- 标签页 -->
      <el-tabs v-model="activeName"
               type="card"
               @tab-click="changeChoiceList">
        <el-tab-pane label="全部"
                     name="all"></el-tab-pane>
        <el-tab-pane label="待审核"
                     name="0"></el-tab-pane>
        <el-tab-pane label="已审核"
                     name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝"
                     name="2"></el-tab-pane>
      </el-tabs>

      <!-- 列表渲染 -->
      <el-table :data="chioceList"
                style="width: 100%">
        <!-- <el-table-column prop="number"
                         label="试题编号">
        </el-table-column>
        <el-table-column prop="subject"
                         label="学科">
        </el-table-column> -->
        <el-table-column prop="catalog"
                         label="目录">
        </el-table-column>
        <el-table-column label="题型">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType==='1'">单选题</span>
            <span v-if="scope.row.questionType==='2'">多选题</span>
            <span v-if="scope.row.questionType==='3'">简答题</span>
          </template>
        </el-table-column>
        <el-table-column label="题干">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate"
                         label="录入时间">
          <template slot-scope="scope">
            {{scope.row.addDate |timeFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty"
                         label="难度">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty==='1'">简单</span>
            <span v-if="scope.row.difficulty==='2'">一般</span>
            <span v-if="scope.row.difficulty==='3'">困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator"
                         label="录入人">
        </el-table-column>
        <el-table-column prop="chkState"
                         label="审核状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.chkState===0">待审核</el-tag>
            <el-tag v-if="scope.row.chkState===1"
                    type="success">通过</el-tag>
            <el-tag v-if="scope.row.chkState===2"
                    type="danger">拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks"
                         label="审核意见">
        </el-table-column>
        <el-table-column prop="chkUser"
                         label="审核人">
        </el-table-column>
        <el-table-column prop="publishState"
                         label="发布状态">
          <template slot-scope="scope">
            <span v-if="scope.row.publishState===1">已发布</span>
            <span v-if="scope.row.publishState===0">未发布</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="220">
          <template slot-scope="scope">
            <el-button @click.prevent="openPreview(scope.row)"
                       type="text">预览</el-button>
            <el-button type="text"
                       @click="reviewTest(scope.row)"
                       :disabled="scope.row.chkState===0 ? false : true">审核</el-button>
            <el-button type="text"
                       :disabled="scope.row.publishState===1"
                       @click="$router.push('/questions/new?id='+scope.row.id)">修改</el-button>
            <el-button type="text"
                       @click="pubTest(scope.row)">{{scope.row.publishState===1? '下架':'上架'}}</el-button>
            <el-button type="text"
                       @click='delChoice(scope.row)'
                       :disabled="scope.row.publishState===1">删除</el-button>
            <!-- <a href="javascript;"
               style="color:red"
               class="skip">预览</a>
            <a class="skip"
               :style="scope.row.chkState===0 ? 'color:red':'color:#eee'"
               :disabled="scope.row.chkState===0 ? true : false">审核</a>
            <a class="skip"
               href="javascript;">修改</a>
            <a class="skip"
               href="javascript;">上架</a>
            <a href="javascript;">删除</a> -->
            <!-- <el-button type="primary"
                       size="mini"
                       plain
                       @click="openPreview(scope.row)"
                       icon="el-icon-view"
                       circle></el-button>
            <el-button type="success"
                       size="mini"
                       plain
                       icon="el-icon-edit"
                       @click="$router.push('/questions/new?id='+scope.row.id)"
                       circle></el-button>
            <el-button type="danger"
                       size="mini"
                       plain
                       icon="el-icon-delete"
                       @click="delTest(scope.row)"
                       circle></el-button>
            <el-button type="warning"
                       size="mini"
                       plain
                       @click="addFeatured(scope.row)"
                       icon="el-icon-check"
                       circle></el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <br>
      <br>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="params.page"
                     :page-sizes="[5, 10, 15, 20]"
                     :page-size="params.pagesize"
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="count">
      </el-pagination>

      <!-- 预览弹出层 -->
      <el-dialog title="题目预览"
                 :visible.sync="isTestShow"
                 width="56%">
        <questions-preview :pre-content="testInfo"
                           v-if="isTestShow"></questions-preview>
        <span slot="footer">
          <el-button @click="isTestShow = false">关闭</el-button>
          <el-button type="primary">确定</el-button>
        </span>
      </el-dialog>

      <!-- 弹出审核弹出层 -->
      <el-dialog title="题目审核"
                 v-if="isReviewShow"
                 :visible.sync="isReviewShow"
                 width="30%">

        <el-form :model="reviewInfo"
                 ref="reviewForm"
                 size="normal">
          <el-form-item label=""
                        prop="chkState"
                        class="result">
            <el-radio v-model="reviewInfo.chkState"
                      label="1">通过</el-radio>
            <el-radio v-model="reviewInfo.chkState"
                      label="2">拒绝</el-radio>
          </el-form-item>
          <el-form-item label=""
                        size="normal"
                        prop="chkRemarks"
                        class="suggestion">
            <el-input type="textarea"
                      :rows="2"
                      placeholder="请输入内容"
                      v-model="reviewInfo.chkRemarks">
            </el-input>
          </el-form-item>

        </el-form>

        <span slot="footer">
          <el-button @click="isReviewShow = false">取消</el-button>
          <el-button type="primary"
                     @click="submitReview">确定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>

</template>

<script>
import { choice, remove, choiceAdd, choiceCheck, choicePublish } from '@/api/hmmm/questions'
import { list as sublist } from '@/api/hmmm/subjects'
import { list as catelist } from '@/api/hmmm/directorys'
import { list as tagslist } from '@/api/hmmm/tags'
import { list as userlist } from '@/api/base/users'
import VDistpicker from 'v-distpicker'
import QuestionsPreview from '../components/questions-preview.vue'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  name: 'QuestionsChoice',
  // eslint-disable-next-line vue/no-unused-components
  components: { VDistpicker, QuestionsPreview },
  data() {
    return {
      chioceList: [],
      params: {
        page: 1,
        pagesize: 5,
        subjectID: null, //学科
        difficulty: null, //难度
        questionType: null, //试题类型
        tags: null, //标签名称
        province: null, //企业所在省份
        city: null, //企业所在城市
        keyword: null, //关键字
        remarks: null, //题目备注
        shortName: null, //企业简称
        direction: null, //方向
        creatorID: null, //录入人
        catalogID: null, //目录
        chkState: null //审核状态
      },
      activeName: 'all',
      subparams: {
        page: 1,
        pagesize: 50,
        subjectName: null
      },
      cataparams: {
        page: 1,
        pagesize: 50,
        subjectID: null,
        directoryName: null,
        state: null
      },
      tagsparams: {
        page: 1,
        pagesize: 50,
        subjectID: null,
        tagName: null,
        state: null
      },
      userparams: {
        page: 1,
        pagesize: 50,
        username: this.$store.getters.name,
        disabled: null
      },
      subjectList: [],
      cataList: [],
      tagsList: [],
      userList: [],
      count: 0,
      isTestShow: false,
      testInfo: {},
      provincesList: provinces(),
      citysList: [],
      isReviewShow: false,
      reviewInfo: {
        chkState: '',
        chkRemarks: '',
        id: ''
      },
      form: {}
    }
  },
  created() {
    this.loadChioceList()
    // this.loadSubList()
    this.loadUserList()
  },
  methods: {
    async loadUserList() {
      try {
        let { data: res } = await userlist(this.userparams)
        this.userList = res.list
      } catch (error) {}
    },
    async loadChioceList() {
      if (this.activeName !== 'all') {
        this.params.chkState = this.activeName
      }
      try {
        let { data: res } = await choice(this.params)
        this.params.chkState = null
        this.chioceList = res.items
        this.count = res.counts
      } catch (error) {}
    },
    // async loadSubList() {
    //   try {
    //     let { data: res } = await sublist(this.subparams)
    //     this.subjectList = res.items
    //     console.log(this.userparams.username)
    //   } catch (error) {}
    // },
    async changeSub(val) {
      //   this.cataparams.subjectID = val
      //   this.tagsparams.subjectID = val
      this.cataList = this.$store.state.user.cataList.filter((item) => {
        return item.subjectID == val
      })
      this.tagsList = this.$store.state.user.tagsList.filter((item) => {
        return item.subjectID == val
      })
      //   try {
      //     let { data: res } = await catelist(this.cataparams)
      //     this.cataList = res.items
      //   } catch (error) {}
      //   try {
      //     let { data: res } = await tagslist(this.tagsparams)
      //     this.tagsList = res.items
      //   } catch (error) {}
    },
    handleSizeChange(val) {
      this.params.pagesize = val
      this.loadChioceList()
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.loadChioceList()
    },
    resetForm() {
      console.log(111)
      this.$refs.testForm.resetFields()

      //   console.log(this.$refs.form)
    },
    openPreview(val) {
      this.isTestShow = true
      this.testInfo = val
    },
    // 获取市内区域列表
    getCitys(val) {
      console.log(val)
      this.citysList = citys(val)
    },
    reviewTest(val) {
      console.log(val)
      this.reviewInfo.id = val.id
      this.isReviewShow = true
    },
    async submitReview() {
      if (this.reviewInfo.chkState === '') return this.$message.warning('请选择审核结果')
      if (this.reviewInfo.chkRemarks === '') return this.$message.warning('请输入审核意见')
      this.reviewInfo.chkState = parseInt(this.reviewInfo.chkState)
      try {
        await choiceCheck(this.reviewInfo)
        this.$refs.reviewForm.resetFields()
        this.loadChioceList()
        this.$message.success('操作成功')
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败')
      }
      this.isReviewShow = false
    },
    pubTest(val) {
      this.$confirm(`您确定${val.publishState === 1 ? '下架' : '上架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        val.publishState = val.publishState === 1 ? 0 : 1
        try {
          await choicePublish(val)
          this.loadChioceList()
          this.$message.success(`${val.publishState === 0 ? '下架' : '上架'}成功`)
        } catch (error) {
          console.log(error)
          this.$message.error(`${val.publishState === 0 ? '下架' : '上架'}失败`)
        }
      })
    },
    delChoice(val) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await remove(val)
          if (this.params.page !== 1 && this.chioceList.length == 1) {
            this.params.page--
          }
          this.loadChioceList()
          this.$message.success('删除成功')
        } catch (error) {
          console.log(error)
          this.$message.error('删除失败')
        }
      })
    },
    changeChoiceList() {
      this.params.page = 1
      this.loadChioceList()
    }
  }
}
</script>

<style scoped lang='less'>
.addTest {
  float: right;
  width: 100%;
  button {
    float: right;
  }
}
.filter {
  .el-form-item {
    float: right;
  }
}

.skip {
  margin-right: 8px;
}
.result {
  display: flex;
  justify-content: center;
}
.suggestion {
  padding: 0 30px;
}
</style>
